<template>
	<view class="container">
		<uni-nav-bar title="每日精品" fixed statusBar :border="false"></uni-nav-bar>
		<view class="noticeBar" v-if="noticeData.isOpen" :style="'top:'+ statusbarHeight +'px;'">
			<uni-notice-bar show-icon scrollable showClose :text="noticeData.data" :speed="60" color="#333"
				backgroundColor="#eee" />
		</view>
		<uni-swiper-dot @clickItem="clickItem" :info="swipperList" :current="current" mode="default" field="content">
			<swiper class="swiperBox" autoplay circular @change="swiperChange" :current="swiperDotIndex">
				<swiper-item v-for="(item, index) in swipperList" :key="index">
					<image class="swiperBox-swiperItem" mode="aspectFill" :src="item.url" />
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="optionBox">
			<view class="searchBox" @click="gotoSearch">
				<uni-search-bar class="searchBox-search" placeholder="请输入产品名称" radius="100" bgColor="#eee"
					clearButton="auto" cancelButton="none" readonly></uni-search-bar>
			</view>
		</view>
		<view class="typeBox" v-if="Array.isArray(typeList) && typeList.length">
			<view class="typeBox-card" v-for="item in typeList" :key="item._id" @click="() => handleTypeChange(item)">
				<image class="typeBox-image" mode="aspectFill" :src="item.icon?.url"></image>
				<text class="typeBox-text">{{item.title}}</text>
			</view>
		</view>
		<view class="hotTypeBox" v-if="Array.isArray(hotTypeData) && hotTypeData.length">
			<view class="hotTypeBox-card" v-for="(item, index) in hotTypeData" :key="index">{{item}}</view>
		</view>
		<view class="cardBox">
			<title text="热门推荐"></title>
			<WaterFall></WaterFall>
		</view>
		<view class="cardBox" v-if="storyData.isOpen">
			<title text="品牌故事"></title>
			<view class="brandStory"><text>{{storyData.data}}</text></view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import WaterFall from '../index/components/waterfall/index.vue'
	import {
		swipperData
	} from './mock';

	const swipperList = ref([])
	const typeList = ref([])
	const current = ref(0)
	const swiperDotIndex = ref(0)
	const hotTypeData = ref([])
	const noticeData = ref({
		data: '',
		isOpen: false
	})
	const storyData = ref({
		data: '',
		isOpen: false
	})
	const statusbarHeight = getApp().globalData.statusbarHeight + 44

	const swiperChange = (e) => {
		current.value = e.detail.current
	}

	const clickItem = (e) => {
		swiperDotIndex.value = e
	}

	const gotoSearch = (e) => {
		uni.switchTab({
			url: '/pages/search/index',
		})
	}

	const handleTypeChange = (item) => {
		getApp().globalData.typeOptions.typeId = item._id
		uni.switchTab({
			url: '/pages/type/index',
		})
	}

	const getCategoriesData = async () => {
		const mallCategories = uniCloud.importObject('mall-categories')
		try {
			const res = await mallCategories.getData()
			typeList.value = res?.data
		} catch (err) {
			console.log('错误 ', err.errCode, '：', err.errMsg)
		}
	}

	const getNotice = async (basicSetting) => {
		const res = await basicSetting.getData({
			key: 'notice'
		})
		if (res?.data) {
			noticeData.value = res?.data
		}
	}

	const getStory = async (basicSetting) => {
		const res = await basicSetting.getData({
			key: 'story'
		})
		if (res?.data) {
			storyData.value = res?.data
		}
	}

	const getBasicSetting = () => {
		try {
			const basicSetting = uniCloud.importObject('mall-basic-setting')
			getStory(basicSetting)
			getNotice(basicSetting)
		} catch (err) {
			console.log('错误 ', err.errCode, '：', err.errMsg)
		}
	}

	const getSwipperData = async () => {
		try {
			const homeSwipper = uniCloud.importObject('home-swipper')
			const res = await homeSwipper.getData()
			swipperList.value = res?.data?.map(item => ({
				...item,
				url: item.image.url
			}))
		} catch (err) {
			console.log('错误 ', err.errCode, '：', err.errMsg)
		}
		uni.stopPullDownRefresh()
	}

	const getData = () => {
		getCategoriesData()
		getBasicSetting()
		getSwipperData()
	}

	onPullDownRefresh(() => getData())
	onShow(() => getData())
</script>

<style scoped lang="scss">
	@import url("../../styles/common.scss");

	@mixin ellipse {
		box-sizing: border-box;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.container {
		width: 100%;
		min-height: 100vh;
		background-color: var(--background-color);
		overflow: hidden;
	}

	.noticeBar {
		z-index: 1;
		position: sticky;
	}

	.optionBox {
		width: 100%;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.searchBox {
		width: 100%;
		border-radius: 100px;
		margin: 0 calc(var(--margin-horizontal) + 4px);

		&-search {
			width: 100%;
		}
	}

	.swiperBox {
		height: 210px;

		&-swiperItem {
			width: 100%;
			height: 100%;
			border-radius: 0 0 12px 12px;
		}
	}

	.typeBox {
		padding: calc(var(--margin-vertical) + 6px) var(--margin-horizontal);
		box-sizing: border-box;
		display: grid;
		grid-template-columns: repeat(4, 25%);
		grid-gap: 28px 0;

		&-card {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%
		}

		&-text {
			@include ellipse();
			width: 100%;
			font-size: 14px;
			color: #333;
			text-align: center;
		}

		&-image {
			width: 54px;
			height: 54px;
			background-color: #fafafc;
			border-radius: 100%;
			margin-bottom: 12px;
			border: 1px solid #cfe9ff;
			box-shadow: 0 0 8px 4px #cfe9ff;
		}
	}

	.hotTypeBox {
		height: 160px;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		padding-bottom: var(--margin-vertical);

		&-card {
			background-color: #cfe9ff;
			display: flex;
			align-items: center;
			justify-content: center;

			&:not(:last-child) {
				border-right: 1px solid #eee;
			}
		}
	}

	.cardBox {
		margin: 0 2vw calc(var(--margin-vertical) / 1.5);
		overflow: hidden;
		padding-bottom: var(--margin-vertical);
		border-radius: 8px;
		background-color: white;
		border: 1px solid #f6f6f8;
	}

	.brandStory {
		padding: 0 calc(var(--margin-horizontal) * 3.5);
		font-size: 14px;
		line-height: 28px;
	}
</style>